<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SuperAI Website</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.3/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@400;700&display=swap">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/gsap.min.js"></script>
    <script src="js/ScrollTrigger.min.js"></script>
</head>

<body>
    <div class="menu-wrapper">
        <div class="icon-boxer">
            <div class="icon-item icon-message" data-id="message"></div>
            <div class="icon-item icon-menu" data-id="menu"></div>
            <div class="icon-item icon-chat" data-id="chat"></div>
        </div>
        <div class="popup-boxer">
            <div class="popup-item popup-message">
                <div class="popup-close"><i class="bi bi-x-circle-fill"></i></div>
                <div class="popup-arrow"></div>
                <div class="popup-inner glow-border">
                    <div class="row">
                        <div class="col-md-12 popup-title">Leave A Message</div>
                        <div class="col-md-12 popup-desc">We're a consecutive multi-award winning AI & Software Company, for the 2nd Year running!</div>
                        <div class="col-md-12 form-boxer">
                            <div class="min-height">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control mb-3" placeholder="Name" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="email" class="form-control mb-3" placeholder="Email" />
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control mb-3" placeholder="Phone Number" />
                                    </div>
                                </div>                            
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control mb-3" placeholder="Please select an area of interest" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control mb-3" placeholder="$ Please select your project budget" />
                                    </div>
                                </div>                            
                                <div class="row">
                                    <div class="col-md-12">
                                        <textarea cols="8" class="form-control mb-3" placeholder="Your Enquiry..."></textarea>
                                    </div>
                                </div>                            
                                <div class="row">
                                    <div class="col-md-12">
                                        <button class="glow-button">Send Enquiry &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/icon-arrow-right.png" class="button-arrow" /></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup-item popup-menu">
                <div class="popup-close"><i class="bi bi-x-circle-fill"></i></div>
                <div class="popup-arrow"></div>
                <div class="popup-inner glow-border">
                    <div class="row">
                        <div class="col-md-12 popup-title">Site Menu</div>
                        <div class="col-md-12 popup-desc">We're a consecutive multi-award winning AI & Software Company, for the 2nd Year running!</div>
                        <div class="col-md-12 menu-boxer">
                            <div class="min-height">
                                <ul>
                                    <li>
                                        <a class="link-home" href="/"><i class="bi bi-house-fill"></i>Home</a>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second link-hassub"><i class="bi bi-arrow-right-circle-fill"></i> How AI will revolutionise your business</a>
                                        <ul>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Whitepaper for SMEs</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Automation of key business processes with AI</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Digital Transformation with AI</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Omnichannel/Multi Modal AI</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second"><i class="bi bi-arrow-right-circle-fill"></i> Success Stories</a>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second link-hassub"><i class="bi bi-arrow-right-circle-fill"></i> Solutions</a>
                                        <ul>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> SuperChat</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Custom Copilots</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> AI Voice Apps</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Computer Vision Apps</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> AI Development</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> AI Business Intelligence</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second link-hassub"><i class="bi bi-arrow-right-circle-fill"></i> Technology</a>
                                        <ul>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Azure OpenAI</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> ChatGPT generative AI and LLMs</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Machine & Deep learning with AI</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second link-hassub"><i class="bi bi-arrow-right-circle-fill"></i> About SuperAi</a>
                                        <ul>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Privacy Policy</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Contact Info</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Working with SuperAI</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Awards</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Team</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Business Show 24</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Digital Brochure</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="link-second link-hassub"><i class="bi bi-arrow-right-circle-fill"></i> Get Started on your AI Journey</a>
                                        <ul>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Ai Hour of Power</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Building your tech startup</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Workshops</a>
                                            </li>
                                            <li>
                                                <a href="#" class="link-third"><i class="bi bi-file-earmark-fill"></i> Whitepaper for SMEs</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup-item popup-chat">
                <div class="popup-close"><i class="bi bi-x-circle-fill"></i></div>
                <div class="popup-arrow"></div>
                <div class="popup-inner glow-border">
                    <div class="row">
                        <div class="col-md-12 popup-title">Be the first to access Super AI</div>
                        <div class="col-md-12 popup-desc">- Join the waiting list</div>
                        <div class="col-md-12 form-boxer">
                            <div class="min-height">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="text" class="form-control mb-3" placeholder="Name" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="email" class="form-control mb-3" placeholder="Email" />
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control mb-3" placeholder="Phone Number" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button class="glow-button">Join Waiting List &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/icon-arrow-right.png" class="button-arrow" /></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="logo">
      <img src="images/superAI-logo.png" alt="SuperAI Logo" />
    </div>
    <!-- Header Section -->
    <header class="carousel" id="swiper1">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/banner.png" class="d-block w-100 carousel-image" alt="Header Image" />
          <div class="description-right">
            <h1>Build an AI Copilot to give you a superhuman extra virtual employee</h1>
            <p><button class="glow-button">Talk To Super Ai&nbsp;&nbsp;&nbsp;&nbsp;<i class="bi bi-arrow-right"></i></button></p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="images/banner2.png" class="d-block w-100 carousel-image" alt="Header Image" />
          <div class="description-left">
            <h1>Build an AI Copilot to give you a superhuman extra virtual employee</h1>
            <p>Here at Superluminal we are software engineers, so we design our software from scratch, constructing critical systems that align to process and hyper charge your business</p>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="images/Industry-bg2.png" class="d-block w-100 carousel-image" alt="Header Image" />
          <div class="description-right">
            <h1>Build an AI Copilot to give you a superhuman extra virtual employee</h1>
            <p><button class="glow-button">Talk To Super Ai&nbsp;&nbsp;&nbsp;&nbsp;<i class="bi bi-arrow-right"></i></button></p>
          </div>
        </div>
        <!-- Add more carousel items as needed -->
      </div>
    </div>
      <div class="swiper-number"></div>
      <div class="d-flex mt-5">
        <div style="height: 3px" class="progress carousel-progressbar">
          <div class="progress-bar bg-danger" style="width: 33%"></div>
          <div class="progress-bar bg-none" style="width: 33%"></div>
          <div class="progress-bar bg-none" style="width: 33%"></div>
        </div>
        <div class="align-self-end">
          <button class="btn border-danger btn-md m-1 text-danger btn-prev" type="button">
            <i class="bi bi-arrow-left"></i>
          </button>
          <button class="btn bg-danger btn-md m-1 text-white btn-next" type="button">
            <i class="bi bi-arrow-right"></i>
          </button>
        </div>
      </div>
    </header>
    <section class="scetion-container-full" >
      <section class="logobar mt-5">
          <div class="logoitem"><img src="images/logo-MicrosoftTeams.png" /></div>
          <div class="logoitem"><img src="images/logo-Office365.png" /></div>
          <div class="logoitem"><img src="images/logo-NopCommerce.png" /></div>
          <div class="logoitem"><img src="images/logo-MicrosoftPartner.png" /></div>
          <div class="logoitem"><img src="images/logo-AspNetCore.png" /></div>
          <div class="logoitem"><img src="images/logo-PowerSuite2022.png" /></div>
          <div class="logoitem"><img src="images/logo-MicrosoftTeams2.png" /></div>
          <div class="logoitem"><img src="images/logo-xamarin.png" /></div>
      </section>
    </section>

  <!-- About Section -->
  <section class="scetion-container-full whoWeAre-bg">
    <div class="whoWeAre-container">
      <div class="whoWeAre-intro">
        <h2 class="title fontsize-62 s980-fs36">Who We Are</h2>
        <div class="description fontsize-32 s980-fs20">We're a consecutive multi-award winning AI & Software Company, for the 2nd
          Year running!
        </div>
        <div class="explore-more-box">
          <a class="explore-more text-white" href="#">Explore More <i class="bi bi-arrow-right"
              style="margin-left: 10px;"></i></a>
        </div>
      </div>
      <div class="whoWeAre-content">
        <div class="whoWeAre-item">
          <div class="img-box">
            <img src="images/Mask group.png" alt="About Image" />
          </div>
          <div class="info-box">
            <h2 class="text-left"> Software Development Firm of the Year 2023-24</h2>
            <div class="text-left">The judges were particularly impressed by the company’s ability to boost
              its
              clients’ capabilities through AI. Superluminal Software integrates the power of Microsoft AI into
              businesses
              to give them a competitive edge in their respective markets.</div>
          </div>
        </div>
        <div class="whoWeAre-item">
          <div class="info-box">
            <h2 class="text-left">Software Solutions Provider of the Year 2024</h2>
            <div class="text-left">The judging panel was impressed by the developer’s innovative use of AI
              across its software projects. Superluminal offers businesses a no-obligation AI learning session to help
              them understand how this innovative tech can enhance their services, as well as more in-depth onsite
              workshop days closely tailored to the company’s needs.</div>
          </div>
          <div class="img-box">
            <img src="images/Mask group (1).png" alt="About Image" />
          </div>
        </div>
      </div>
    </div>
    <div class="londonBusiness-container">
      <div class="londonBusiness-content">
        <img class="content-title" src="images/the-london-business-show-logo.png" alt="The London Business Show 2023"
          title="The London Business Show 2023">
        <h3 class="content-info">Catch up with the Superluminal team at The Business Show London 2023</h3>
      </div>
      <div class="londonBusiness-video">
        <video playsinline="" controls="controls" autobuffer="autobuffer" poster="" id="spv" class="lazy-hidden">
          <source src="https://perfecvcdn.blob.core.windows.net/video/sl-bs23-169.mov" type="video/mp4"
            alt="Superluminal Software at The London Business Show 2023 Video"
            title="Superluminal Software at The London Business Show 2023 Video">
        </video>
      </div>
    </div>
  </section>

  <!-- Innovative software Section -->
  <section class="scetion-container-full innovative-software-bg py-5">
    <div class="innovative-software-container">
      <div class="innovative-software-title">
        <h2 class="title fontsize-62 s980-fs36">
          Innovative software and <strong>AI solutions</strong> to help predict and <strong>grow</strong> your
          <strong>business</strong>.
        </h2>
        <div class="btn-box">
          <div class="btn1 text-white"><img style="margin-right: 4px;" src="images/customerService.png" alt=""> Get a
            Free Consultation</div>
        </div>
      </div>
      <div class="innovative-software-content glow-border">
        <img class="img" src="images/AI-solutions.png" alt="">
        <div class="info-box">
          <div class="info-content">In the fast-paced landscape of evolving technology, staying ahead is imperative. You
            need to work with a
            trusted, experienced Microsoft software development partner to ensure your business is making the most of
            the
            opportunities available in your Microsoft software investment.</div>
          <div class="explore-more-box">
            <div class="explore-more">Explore More <img class="arrow-down" style="margin-left: 6px;"
                src="images/arrow-down.png" alt=""></div>
          </div>
        </div>
      </div>
    </div>

    <div class="microsoftAI-container">
      <div class="microsoftAI-title">
        <h2 class="title fontsize-62 s980-fs36">
          It is time to integrate <strong>Microsoft AI</strong> into your business to give you a competitive edge?
        </h2>
        <div class="btn-box">
          <img class="img" src="images/Microsoft-AI.png" alt="">
        </div>
      </div>
      <div class="microsoftAI-content">
        <div class="title fontsize-32 s980-fs20">The possibilities are endless and could include:</div>
        <div class="list-box list-box-animation1">
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Build superhuman AI capability into your existing Apps and Microsoft software.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Implement AI productivity Copilots that understand your business, its context and work
              collaboratively with you as an additional employee, securely, on your data.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Forecast your business’s future across inventory, sales, resources, and revenue giving
              your business key advantage in advance.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Automate your key business processes and workflows so you never have to do them again!</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Use Deep Learning to gain incredible insights into your data and act upon them to
              significantly improve your outcomes.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Use Generative AI to complete content tasks superhuman faster, freeing up staff to be
              more creative and do more in less time than ever before.</div>
          </div>
        </div>
        <div class="list-box list-box-switch">
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Build superhuman AI capability into your existing Apps and Microsoft software.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Implement AI productivity Copilots that understand your business, its context and work
              collaboratively with you as an additional employee, securely, on your data.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Forecast your business’s future across inventory, sales, resources, and revenue giving
              your business key advantage in advance.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Automate your key business processes and workflows so you never have to do them again!</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Use Deep Learning to gain incredible insights into your data and act upon them to
              significantly improve your outcomes.</div>
          </div>
          <div class="list-item"><img class="img" src="images/select-item.png" alt="">
            <div>Use Generative AI to complete content tasks superhuman faster, freeing up staff to be
              more creative and do more in less time than ever before.</div>
          </div>
        </div>
        <div class="explore-more-box">
          <div class="explore-more">Explore More <img class="arrow-down" style="margin-left: 6px;"
              src="images/arrow-down.png" alt=""></div>
        </div>
      </div>
    </div>
  </section>

  <section class="scetion-container-full py-5">
    <div class="ability-container">
      <div class="ability-content-box quadrilateral">
        <div class="ability-content">
          <div class="title">Decades of Software Experience</div>
          <div class="list-box">
            <div class="list-item">
              <img class="img" src="images/select-item.png" alt="">
              <div>We're SUPER PROUD of what we've been able to help our clients achieve with their systems and apps on
                each journey undertaken.</div>
            </div>
            <div class="list-item">
              <img class="img" src="images/select-item.png" alt="">
              <div>We're reducing client's annual software maintenance and running costs by up to 75%, we're reducing
                their system errors and failure rates to < .001% a month and we're improving their system's performance
                  by 1000%+.</div>
              </div>
              <div class="list-item">
                <img class="img" src="images/select-item.png" alt="">
                <div>Could we help you achieve similar results and successes?</div>
              </div>
            </div>
            <div class="explore-more-box">
              <div class="explore-more">Discover more about Superluminal<i class="bi bi-arrow-right"
                  style="margin-left: 10px;"></i></div>
            </div>
          </div>
        </div>
        <div class="ability-content-box quadrilateral">
          <div class="ability-content">
            <div class="title">Microsoft AI Cloud & Xamarin/.NetMaui Partners</div>
            <div class="list-box">
              <div class="list-item">
                <img class="img" src="images/select-item.png" alt="">
                <div>We develop high performance software solutions using Cloud and Mobile Technology for Enterprise,
                  Small and Medium business, and of course Start-up’s.</div>
              </div>
              <div class="list-item">
                <img class="img" src="images/select-item.png" alt="">
                <div>As a certified Microsoft AI Cloud Partner & Xamarin/.NetMaui Consulting Partner, you can be assured
                  that your business is in safe hands. Our software utilises stable and proven solutions built on
                  Microsoft frameworks, design patterns, and the latest techniques such as Micro Services and
                  Containerised support.</div>
              </div>
            </div>
            <div class="explore-more-box">
              <div class="explore-more">Discover more about our leading solutions<i class="bi bi-arrow-right"
                  style="margin-left: 10px;"></i></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="scetion-container-full innovative-software-bg py-5">
    <div class="partners-container">
      <div class="partners-info">
        <div class="title fontsize-62 s980-fs36">Our Key Partners</div>
        <div class="description fontsize-32 s980-fs20">We have a range of technological and mutual business interest partners we work with:
        </div>
      </div>
      <div class="partners-list">
        <div class="img-box">
          <div class="img-link-box">
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo1.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
          </div>
          <div class="img-link-box">
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo2.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo3.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
          </div>
          <div class="img-link-box">
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo4.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo5-active.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-logo6.png" alt=""></a>
            <a class="img-link" href="#"><img class="img" src="images/partners-bg.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
    <div class="case-container">
      <div class="case-info">
        <div class="title fontsize-62 s980-fs36">Client Success Stories</div>
        <div class="description fontsize-32 s980-fs20">Startups, Small, Medium and Enterprise - we work with businesses of all sizes.
        </div>
      </div>
      <div class="case-list">

        <header class="carousel slide case-carousel s-block s820-none" id="headerCarousel1" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="case-item-box">
                <div class="case-item">
                  <div class="case-title">
                    <img class="img" src="images/case-logo1.png" alt="" />
                  </div>
                  <div class="description">
                    I would highly recommend Superluminal to anyone, professional, very creative and I was thrilled with
                    the app/website they produced.
                  </div>
                  <div class="founder">
                    Tom, Founder
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
                <div class="case-item">
                  <div class="case-title">
                    <img class="img" src="images/case-logo2.png" alt="" />
                  </div>
                  <div class="description">
                    There was only one horse in the race! These guys are oustanding at what they do, so much so we
                    recommend them to our clients. Brilliant!
                  </div>
                  <div class="founder">
                    Baroness Susan Greenfield CBE FRCP
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="case-item-box">
                <div class="case-item">
                  <div class="case-title">
                    <img class="img" src="images/case-logo2.png" alt="" />
                  </div>
                  <div class="description">
                    There was only one horse in the race! These guys are oustanding at what they do, so much so we
                    recommend them to our clients. Brilliant!
                  </div>
                  <div class="founder">
                    Baroness Susan Greenfield CBE FRCP
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
                <div class="case-item">
                  <div class="case-title">
                    <img class="img" src="images/case-logo3.png" alt="" />
                  </div>
                  <div class="description">
                    By their understanding our business needs our CRM system is now a far more powerful tool..."
                  </div>
                  <div class="founder">
                    Simon, CEO
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex mt-2" style="height: 40px">
            <div style="height: 3px" class="progress carousel-progressbar">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="90"></div>
            </div>
            <div class="align-self-end">
              <button class="btn bg-danger btn-sm m-1 text-white" type="button" data-bs-target="#headerCarousel1"
                data-bs-slide="prev">
                <i class="bi bi-arrow-left"></i>
              </button>
              <button class="btn bg-danger btn-sm m-1 text-white" type="button" data-bs-target="#headerCarousel1"
                data-bs-slide="next">
                <i class="bi bi-arrow-right"></i>
              </button>
            </div>
          </div>
        </header>

        <header class="carousel slide case-carousel s-none s820-block" id="headerCarousel2" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="case-item-box">
                <div class="case-item" style="width: 100%;">
                  <div class="case-title">
                    <img class="img" src="images/case-logo1.png" alt="" />
                  </div>
                  <div class="description">
                    I would highly recommend Superluminal to anyone, professional, very creative and I was thrilled with
                    the app/website they produced.
                  </div>
                  <div class="founder">
                    Tom, Founder
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="case-item-box">
                <div class="case-item" style="width: 100%;">
                  <div class="case-title">
                    <img class="img" src="images/case-logo2.png" alt="" />
                  </div>
                  <div class="description">
                    There was only one horse in the race! These guys are oustanding at what they do, so much so we
                    recommend them to our clients. Brilliant!
                  </div>
                  <div class="founder">
                    Baroness Susan Greenfield CBE FRCP
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="case-item-box">
                <div class="case-item" style="width: 100%;">
                  <div class="case-title">
                    <img class="img" src="images/case-logo3.png" alt="" />
                  </div>
                  <div class="description">
                    By their understanding our business needs our CRM system is now a far more powerful tool..."
                  </div>
                  <div class="founder">
                    Simon, CEO
                  </div>
                  <div class="btn-box">
                    <div class="btn1">Discover more<i class="bi bi-arrow-right" style="margin-left: 10px;"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex mt-2" style="height: 40px">
            <div style="height: 3px" class="progress carousel-progressbar">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 33.33%" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="90"></div>
            </div>
            <div class="align-self-end">
              <button class="btn bg-danger btn-sm m-1 text-white" type="button" data-bs-target="#headerCarousel2"
                data-bs-slide="prev">
                <i class="bi bi-arrow-left"></i>
              </button>
              <button class="btn bg-danger btn-sm m-1 text-white" type="button" data-bs-target="#headerCarousel2"
                data-bs-slide="next">
                <i class="bi bi-arrow-right"></i>
              </button>
            </div>
          </div>
        </header>

      </div>
    </div>
  </section>

  <!-- <section class="scetion-container-full py-5">
    
  </section> -->

  <!-- Client Success Stories Section -->
  <!-- <section class="bg-light py-5">
    <div class="container">
      <h2 class="text-center">Client Success Stories</h2>
      <div id="clientCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="card">
              <h3>Client Name</h3>
              <p>Project description goes here.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#clientCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#clientCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </section> -->

  <!-- Contact Form Section -->
  <section class="scetion-container-full contact-bg">
    <section class="scetion-container-full contact-bg1">
      <div class="contact-container">
        <div class="contact-info">
          <h2 class="title fontsize-62 s980-fs36">Make A Project Enquiry</h2>
          <div class="description fontsize-32 s980-fs20">
            Why not describe your project needs below and contact us today?
          </div>
          <div class="phone-box">
            <img class="img" src="images/phone.png" alt="">
            <div class="phone">01865 655 722</div>
          </div>
        </div>
        <div class="contact-form">
          <form>
            <div class="row">
              <div class="col-md-12">
                <input type="text" class="form-control mb-3" placeholder="Name" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <input type="email" class="form-control mb-3" placeholder="Email" />
              </div>
              <div class="col-md-6">
                <input type="number" class="form-control mb-3" placeholder="Phone Number" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <input type="text" class="form-control mb-3" placeholder="Please select an area of interest" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <input type="number" class="form-control mb-3" placeholder="$ Please select your project budget" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <textarea class="form-control mb-3" placeholder="Your Enquiry..."></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="mb-3">
                  这里是人机验证
                </div>
              </div>
            </div>
            <button type="submit" class="btn-submit btn btn-primary">Send Enquiry<i class="bi bi-arrow-right"
                style="margin-left: 10px;"></i></button>
          </form>
        </div>
      </div>
    </section>
  </section>

  <!-- Footer Section -->
  <footer class="footer-wrapper">
    <div class="row">
      <div class="col-md-12 col-lg-7">
        <div class="row">
          <div class="col-md-12 pt-3">
            <h4>Core Services Stack</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-lg-6 pt-3">
            <ul>
              <li><a href="#">AI Software Development</a></li>
              <li><a href="#">AI Conversational Chat BOT Development</a></li>
              <li><a href="#">AI Copilot Development</a></li>
              <li><a href="#">App Development</a></li>
              <li><a href="#">Business Intelligence Development</a></li>
              <li><a href="#">Cloud E Commerce Development</a></li>
              <li><a href="#">Cloud Web Portal Development</a></li>
            </ul>
          </div>
          <div class="col-md-12 col-lg-6 pt-3">
            <ul>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-12 col-lg-2">
        <div class="row">
          <div class="col-md-12 pt-3">
            <h4>Quick Links</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 pt-3">
            <ul>
              <li><a href="#">What we do</a></li>
              <li><a href="#">What we are</a></li>
              <li><a href="#">Solutions</a></li>
              <li><a href="#">Success Story</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-12 col-lg-3">
        <div class="row">
          <div class="col-md-12 pt-3">
            <h4>Our Location</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 pt-3">
            <p>We are situated a brisk 10 minute walk from Oxford Station, and Oxford City Centre.</p>
            <p>By road we are also minutes away from the A34 and Oxford Ring Road, for easy access to either the M4, or
              M40.</p>
            <p>
              Roger House<br />  Osney Mead<br />  Oxford<br />  OX2 0ES<br />
            </p>
          </div>
          <div class="col-md-12 pt-3 pb-5">
            <button class="red-button">Directions&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/icon-arrow-right-red.png"
                class="button-arrow" /></button>
          </div>
          <div class="col-md-12 pt-5">
            <a href="https://www.linkedin.com/" target="_blank"><img src="images/icon-linkedin.png"
                class="logo-icon" /></a>
            <a href="https://twitter.com/" target="_blank"><img src="images/icon-twitter.png" class="logo-icon" /></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <script src="js/scripts.js"></script>

  <script>
    // gsap code here!
    ScrollTrigger.create({
      trigger: ".microsoftAI-container",
      start: "top center",
      end: "+=500",
      animation: gsap.from('.list-box-animation1 .list-item', {
        scale: 0.5,
        y: -50,
        stagger: 0.2,// 交错
        opacity: 0,
        ease: "power1.out"
      }),
      onUpdate: (self) => console.log("direction:", self.direction),
    });
  </script>
</body>

</html>